import React, { Component } from 'react';
import cass from 'classnames';
import s from './index.module.less';

const weeks = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']

class DatePicker extends Component{

    static defaultProps = {
        value: new Date(),
    }

    constructor(props) {
        super(props);
        this.state={
            year: null,
            month: null,
            days: []
        }
    }

    componentWillMount(){
        const value = this.props.value;
        const year = value.getFullYear();
        const month = value.getMonth() + 1;
        this.getMonthData(year, month);
    }

    componentWillReceiveProps(nextProps){
        const value = nextProps.value;
        if(value.getTime() !== this.props.value.getTime()){
            // 设置今天如期的时候变化
            const { year, month } = this.state;
            const nowYear = value.getFullYear();
            const nowMonth = value.getMonth() + 1;
            if(nowYear !== year || nowMonth !== month){
                this.getMonthData(nowYear, nowMonth);
            }
        }
    }
    
    getMonthData = (year, month) => {
        const days = [];
        if(!year || !month) {
            const today = new Date();
            year = today.getFullYear();
            month = today.getMonth() + 1;
        };

        const firstDay = new Date(year, month - 1, 1);
        const firstDayWeekDay = firstDay.getDay() || 7;

        year = firstDay.getFullYear();
        month = firstDay.getMonth() + 1;

        let lastDayOfLastMonth = new Date(year, month - 1, 0);
        let lastDateOfLastMonth = lastDayOfLastMonth.getDate() || 7;

        // 第一行显示多少个上个月信息
        const preMonthDayCount = firstDayWeekDay - 1;

        const lastDay = new Date(year, month, 0);
        const lastDate = lastDay.getDate();

        for(let i = 0; i< 7 * 6; i++){
            const date = i + 1 - preMonthDayCount;
            let showDate = date;
            let thisMonth = month;
            // 上一月
            if(date <= 0){
                thisMonth = month - 1;
                showDate = lastDateOfLastMonth + date;
            } else if( date > lastDate ) {
                // 下一月
                thisMonth = month + 1;
                showDate = showDate - lastDate;
            }

            if(thisMonth === 0) thisMonth = 12;
            if(thisMonth === 13) thisMonth = 1;

            days.push({
                month: thisMonth,
                date,
                showDate,
                isCurrent: this.isEqual(new Date(), year, thisMonth, showDate),
                isPre: this.isPre(new Date(), year, thisMonth, showDate),
            })
        }

        this.setState({ year, month, days });

    }

    isEqual= (value, year, month, day) => {
        const currentYear = value.getFullYear();
        const currentMonth = value.getMonth() + 1;
        const currentDay = value.getDate();
        const isCurrent = currentYear === year && currentMonth === month && currentDay === day;
        return isCurrent
    }

    isPre= (value, year, month, day) => {
        const currentYear = value.getFullYear();
        const currentMonth = value.getMonth() + 1;
        const currentDay = value.getDate();

        let isPre = false;
        if(year < currentYear){
            isPre = true;
        } else if(year <= currentYear && month < currentMonth) {
            isPre = true;
        } else if(year <= currentYear && month <= currentMonth && day < currentDay) {
            isPre = true;
        }

        return isPre
    }

    changeMonthDate = (year, month, isMinus, isPre) => {
        // if(isPre) return;
        if(isMinus && month === 0){
            this.getMonthData(year - 1, 12);
        } else this.getMonthData(year, month)
        
    }

    render() {
        const { year, month, days } = this.state;
        const { value, marks, onChange } = this.props;

        const today = new Date();
        const currentYear = today.getFullYear();
        const currentMonth = today.getMonth() + 1;

        let yearDisable = year <= currentYear;
        let monthDisable = false;
        if(yearDisable && month <= currentMonth) monthDisable = true;
        if(!yearDisable && month < currentMonth) yearDisable = true; // 年份大，但是此时月份小
        
        return (
            <div className={s.datepickerWapper}>
                <div className={s.header}>
                    <span
                        className={cass('mdi mdi-chevron-double-left', {
                            // [s.disable]: yearDisable,
                        })}
                        onClick={() => this.changeMonthDate(year - 1, month, true, yearDisable)}
                    />
                    <span
                        className={cass('mdi mdi-chevron-left', {
                            // [s.disable]: monthDisable,
                        })}
                        onClick={() => this.changeMonthDate(year, month - 1, true, monthDisable)}
                    />
                    <div className={s.date}>{`${year}年 ${month}月`}</div>
                    <span className="mdi mdi-chevron-right" onClick={() => this.changeMonthDate(year, month + 1)} />
                    <span className="mdi mdi-chevron-double-right" onClick={() => this.changeMonthDate(year + 1, month)} />
                </div>
                <div className={s.content}>
                    <div className={s.weeks}>
                        {weeks.map(v => <span key={v}>{v}</span>)}
                    </div>
                    <div className={s.days}>
                        {days.map(d => (
                            <div
                                key={Math.random()}
                                className={s.wrapday}
                            >
                                <div 
                                    className={cass(s.day, 'hover', {
                                        [s.not]: d.month !== month,
                                        [s.notweek]: d.month !== month,
                                        [s.current]: d.isCurrent,
                                        [s.active]: this.isEqual(value, year, d.month, d.showDate),
                                        [s.pre]: d.isPre
                                    })}
                                    onClick={() => onChange(new Date(year, d.month - 1, d.showDate), d.isPre)}
                                >
                                    {d.showDate}
                                    {marks.some(v => this.isEqual(v.mark, year, d.month, d.showDate)) ? <span className={cass(s.mark, 'mdi mdi-circle-medium')} /> : null}
                                </div>
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        );
    }
}

export default DatePicker